<template>
	<view class="swiper">
		<view class="">
			<view class="close">
				<uni-icons type="close" size="29" color=#fff @click="close"></uni-icons>
			</view>
			<swiper class="content" :indicator-dots="false" :autoplay="false" :interval="1000" :current="changeIndex"
				@change="changSwiper" :duration="1000" previous-margin="38px" next-margin="30px" :circular="true">
				<swiper-item :class="['item',]" v-for="(v,i) in cardList " :key="i">
					<view :class="['zero',changeIndex==i? 'first':'first2']">
						<view class="huode" v-if="changeIndex==i">
							<view class="">
								<!-- /我获得了 -->
								<view class=""> </view>
								<view class="img">
								</view>
							</view>
							<view class="">
								<text> ￥ </text>
								{{monery}}
							</view>
						</view>
						<image :src="v" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="share">
				<block v-for="(item,i) in shareList " :key="i">
					<view class="share-box" @click="handleShare(i,item.card)">
						<image :src="item.card" mode=""></image>
						<text>{{item.title}}</text>
					</view>
				</block>
			</view>
		</view>
		<Qr :link='link' :img='cardList[changeIndex]' ref="saveImage" :monery='monery' @tellFather='tellFather' />
	</view>
</template>
<script>
	import Qr from './qr/index.vue'
	export default ({
		props: {
			monery: {
				type: [Number, String],
				default: 0
			},
		},
		components: {
			Qr
		},
		data() {
			return {
				link: `http://zlg-h5.linglinggong.net/#/?code=${uni.getStorageSync('userId')}`,
				icon: 'https://images.linglinggong.net/static/static/lottery/icon.png',
				userInfo: uni.getStorageSync('userInfo'),
				changeIndex: 0,
				cardList: ['https://images.linglinggong.net/card_1.png', 'https://images.linglinggong.net/card_2.png',
					'https://images.linglinggong.net/card_3.png'
				],
				shareList: [{
					card: 'https://images.linglinggong.net/static/static/lottery/01.png',
					title: '分享至微信'
				}, {
					card: 'https://images.linglinggong.net/static/static/lottery/02.png',
					title: '分享到朋友圈'
				}, {
					card: 'https://images.linglinggong.net/static/static/lottery/03.png',
					title: '保存相册'
				}, ],
				imgUrl: ''
			}
		},
		computed: {},
		mounted() {
			this.cardList.sort(() => Math.random() - 0.5)
		},
		methods: {
			tellFather(e) {
				this.imgUrl = e
			},
			qrR(e) {},
			// 关闭
			close() {
				this.$emit('onClose')
			},
			// 切换数据
			changSwiper(e) {
				let {
					current
				} = e.detail
				this.changeIndex = current
			},
			//分享到
			handleShare(e, l) {
				new Promise((re, rq) => {
					this.$refs.saveImage.qrFun()
					re()
				}).then(() => {
					let that = this
					if (e == 0) {
						that.onShare(l);
					} else if (e == 1) {
						that.onShare1(l);
					} else {
						this.getImageInfo()
					}
				})
			},
			// 分享微信
			onShare(e) {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession", //分享到微信好友   
					type: 2,
					imageUrl: this.imgUrl,
					success: function(res) {
						console.log(res);
					},
					fail: function(e) {
						console.log(e)
					}
				})
			},
			// 分享朋友圈
			onShare1(e) {
				console.log(this.imgUrl, 787878)
				uni.share({
					provider: "weixin",
					scene: "WXSceneTimeline", //分享到微信朋友圈   
					type: 2,
					href: '链接地址',
					title: '标题',
					summary: '描述',
					imageUrl: this.imgUrl,
					success: function(res) {
						console.log(res);
					}
				})
			},
			//分享回调
			async task_share() {
				let res = await this.$fetch(this.$api.task_share, {
					type: 2
				}, 'POST')
			},
			// 获取网络图片信息并下载保存  绘制图片和二维码
			getImageInfo(imageSrc) {
				this.$refs.saveImage.saveImage()
			},
		}
	})
</script>
<style lang="scss" scoped>
	.swiper {
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.8);
		width: 100vw;
		height: 100vh;
		z-index: 11;

		&>view {
			width: 100%;
			height: 100%;
			animation: zoomInDown 1s ease-in 0s 1;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.close {
			margin: 88rpx 28rpx 66rpx 0;
			align-self: flex-end;
		}

		.content {
			width: 100%;
			height: 968rpx;

			.item {
				display: flex;
				justify-content: center;
				align-items: center;
				width: auto;

				&>view {
					height: 100%;

					image {
						height: 100%;
					}
				}
			}
		}

		.share {
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-top: 28rpx;

			&>view:first-child {
				margin-left: 78rpx;
			}

			&>view:last-child {
				margin-right: 78rpx;
			}

			&-box {
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 64rpx;
					height: 64rpx;
				}

				text {
					font-size: 20rpx;
					font-weight: 400;
					color: #FEFDF6;
					margin-top: 14rpx;
				}
			}
		}
	}

	.zero {
		transition: transform ease-out 0.7s;
		width: 640rpx;
		overflow: hidden;
		display: flex;
		justify-content: center;
		position: relative;
	}

	.huode {
		position: absolute;
		top: 0;
		z-index: 9999;
		width: 100%;

		&>view:nth-child(1) {
			display: flex;
			justify-content: space-between;

			&>view:nth-child(1) {
				font-size: 36rpx;
				font-weight: 400;
				color: #FFFFFF;
				margin: 40rpx 0 0 60rpx;
				flex-shrink: 0;
			}

			.img {
				width: 151rpx !important;
				height: 48rpx !important;
				margin: 40rpx 60rpx 0 0;
			}
		}

		&>view:nth-child(2) {
			color: rgba(255, 255, 255, 1);
			font-weight: bold;
			font-size: 136rpx;
			height: 190rpx;
			vertical-align: bottom;
			margin: 10rpx 0 0 60rpx;

			/*底对齐*/
			&>text {
				font-size: 94rpx;
			}
		}
	}

	.first {
		transition: all .3s;
		width: 640rpx !important;
		height: 968rpx !important;
	}

	.first2 {
		transition: all .3s;
		width: 490rpx !important;
		height: 678rpx !important;
	}

	// 结果动画
	@keyframes zoomInDown {
		from {
			opacity: 0;
			transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
			animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
			transform-origin: center bottom;
		}

		60% {
			opacity: 1;
			transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
			animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
			transform-origin: center top;
		}
	}

	.qr {
		width: 154rpx;
		height: 152rpx;
		background: #fff;
		position: absolute;
		bottom: 20rpx;
		right: 24rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10rpx;
	}

	.content /deep/ .uni-swiper-slides {
		width: 600rpx;
	}
</style>